<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>买家聊天页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/buy/buy_chat.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/buy/jquery.mCustomScrollbar.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/buy/jquery.emoji.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">

    <style>

        body{
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
        }

        p,span, input{
            font-weight: 300;
            font-size: 13px;
        }

        .chat-page{
            position: absolute;
            z-index: 9999;
        }

        /*禁止选中文本*/
        .chat-page *{
            z-index: 9999;
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none;  /*webkit浏览器*/
            -ms-user-select: none;   /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }

        .cc-content *{
            -moz-user-select: text; /*火狐*/
            -webkit-user-select: text;  /*webkit浏览器*/
            -ms-user-select: text;   /*IE10*/
            -khtml-user-select: text; /*早期浏览器*/
            user-select: text;
        }
    </style>
</head>
<body>

<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery.nicescroll.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery.mousewheel-3.0.6.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/self/buy/mousedrag.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/jquery.emoji.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/totoro-utils.js"></script>

<div class="chat-page" data-from-uid="${user.userId}">
    <div class="chat-wrap">
        <!-- 左侧卖家选择栏 start-->-200
        <div class="chat-left">
            <div class="cl-header">
                <div class="cl-search-box">
                    <span class="cl-search cl-search-icon">
                        <i class="iconfont icon-ct-sousuo cls-icon"></i>
                    </span>
                    <span class="cl-search">
                        <input class="cl-search-input" type="text" placeholder="搜索联系人，群组"/>
                    </span>
                </div>
            </div>
            <div class="cl-content">
                <div class="cl-seller-items">
                    <!-- 每个卖家进入聊天的div start-->
                    <ul>
                        <c:if test="${fn:length(suMainChats) > 0}">
                            <c:forEach items="${suMainChats}" var="suMainChat" varStatus="vs">
                                <!-- 判断自己在本次聊天中是发送方吗，只是本次，而不是这整个聊天栏 -->
                                <c:set var="isFrom" value="${user.userId == suMainChat.fromUid}"></c:set>
                                <li class="cl-seller-item ${vs.first?'selected':''}" data-sm-id="${suMainChat.id}" data-from-uid="${isFrom?suMainChat.fromUid:suMainChat.toUid}" data-to-uid="${isFrom?suMainChat.toUid:suMainChat.fromUid}"
                                data-detail="${isFrom?suMainChat.shop.shopInfo:'无'}" data-sid="${isFrom?suMainChat.shop.id:'0'}">
                                    <div class="cls-item">
                                        <div class="cl-seller-head cl-seller-info">
                                            <%-- 用户是哪个身份，就显示哪些未读记录 --%>
                                            <c:if test="${isFrom}">
                                                <img class="head-img" src="${fn:length(suMainChat.shop.shopHead)<1?'/static/img/seller/seller_default_head.png':'/static/img/seller/shop/'+=suMainChat.shop.shopHead}"/>
                                                <sup class="bc-badge bc-badge-content is-fixed" data-count="0" style="display: ${suMainChat.fromNotRead!=0?'block':'none'}">${suMainChat.fromNotRead}</sup>
                                            </c:if>
                                            <c:if test="${!isFrom}">
                                                <img class="head-img" src="/static/img/seller/seller_default_head.png"/>
                                                <sup class="bc-badge bc-badge-content is-fixed" data-count="0" style="display: ${suMainChat.toNotRead!=0?'block':'none'}">${suMainChat.toNotRead}</sup>
                                            </c:if>
                                        </div>
                                        <div class="cl-seller-message cl-seller-info">
                                            <p class="cl-seller-name">${isFrom?suMainChat.shop.shopName:suMainChat.user.userName}</p>
                                            <p class="cl-seller-synopsis">${tfn:cutOutImgPrefix(suMainChat.lastText, "[图片]")}</p>
                                        </div>
                                    </div>
                                </li>
                            </c:forEach>
                        </c:if>
                    </ul>
                    <!-- 每个卖家进入聊天的div end-->
                </div>
            </div>
        </div>
        <!-- 左侧卖家选择栏 end -->

        <!-- 中间聊天框架 start-->
        <div class="chat-center">
            <div class="cc-warp">
                <div class="cc-header">
                    <div class="cc-seller-info">
                        <div class="cc-seller-nsm">
                            <c:if test="${fn:length(suMainChats) > 0}">
                            <div class="cc-seller-name ccs-nsm">
                                <c:if test="${user.userId == suMainChats.get(0).fromUid}">
                                <span>${fn:length(suMainChats) >0 ?suMainChats.get(0).shop.shopName:'无'}</span>
                                </c:if>
                                <c:if test="${user.userId != suMainChats.get(0).fromUid}">
                                    <span>${fn:length(suMainChats) >0 ?suMainChats.get(0).user.userName:'无'}</span>
                                </c:if>
                            </div>
                            <div class="cc-seller-status ccs-nsm">
                                <span>[在线]</span>
                            </div>
                            <div class="cc-seller-message">
                                <c:if test="${user.userId == suMainChats.get(0).fromUid}">
                                <span>${fn:length(suMainChats) >0 ?suMainChats.get(0).shop.shopInfo:'无'}</span>
                                </c:if>
                            </div>
                        </div>
                        </c:if>
                    </div>
                </div>

                <div class="cc-content">
                    <%-- 是否有聊天内容 ？ --%>
                    <c:if test="${fn:length(viceChatMap) > 0}">
                        <%-- 外层循环同一时间分组的 --%>
                        <c:forEach items="${viceChatMap}" var="map" varStatus="vs">
                        <div class="clear-float" data-beforeTime="${tfn:dateFormatAgain(map.value.get(0).createTime)}">
                            <div class="author-name">
                                <small class="chat-date">${tfn:dateToWechatTime(map.value.get(0).createTime)}</small>
                            </div>
                            <c:forEach items="${map.value}" var="chat" varStatus="vs">
                                <%-- 内层循环，判断自己是接收者还是发送者 --%>
                                <%-- 如果是发送者 --%>
                                <c:if test="${user.userId == chat.fromUid}">
                                    <div class="chat-that-right chat">
                                        <div class="chat-message">${chat.chatText}</div>
                                        <div class="chat-avatars">
                                            <img src="/static/img/seller/seller_default_head.png" alt="头像">
                                        </div>
                                    </div>
                                </c:if>
                                <c:if test="${user.userId == chat.toUid}">
                                    <div class="chat-that-left chat">
                                        <div class="chat-avatars">
                                            <img src="https://img.alicdn.com/i2/2/TB1vDvUKpXXXXaKXFXXSutbFXXX.jpg_100x150q100.jpg_.webp" alt="头像">
                                        </div>
                                        <div class="chat-message">
                                                ${chat.chatText}
                                        </div>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                        </c:forEach>
                    </c:if>
                </div>

                <div class="cc-input">
                    <div class="function-select">
                        <ul>
                            <li>
                                <span>
                                    <a class="iconfont icon-biaoqing" id="biaoqing"></a>
                                </span>
                            </li>

                            <li>
                                <span>
                                    <a class="iconfont icon-tupian"></a>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="cc-input-text">
                        <div maxlength="800" id="text-input" contenteditable="true"></div>
                    </div>
                    <div class="function-button">
                        <div class="input-empty" style="display: none">
                            <i class="iconfont icon-tixing" style="color: #4EA9E9; font-size: 14px"></i>
                            发送的内容不能为空，请重新输入。
                        </div>
                        <input type="button" value="发送(Enter)" id="send"/>
                        <input type="button" value="关闭(Esc)" id="close"/>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(function () {
                $(document).ready(function () {
                    $("#text-input").emoji({
                        button: "#biaoqing",
                        showTab: false,
                        animation: 'slide',
                        icons: [{
                            name: "贴吧表情",
                            path: "/static/img/expression/tieba/",
                            maxNum: 50,
                            file: ".jpg",
                            placeholder: ":{alias}:",
                            alias: {
                                1: "hehe",
                                2: "haha",
                                3: "tushe",
                                4: "a",
                                5: "ku",
                                6: "lu",
                                7: "kaixin",
                                8: "han",
                                9: "lei",
                                10: "heixian",
                                11: "bishi",
                                12: "bugaoxing",
                                13: "zhenbang",
                                14: "qian",
                                15: "yiwen",
                                16: "yinxian",
                                17: "tu",
                                18: "yi",
                                19: "weiqu",
                                20: "huaxin",
                                21: "hu",
                                22: "xiaonian",
                                23: "neng",
                                24: "taikaixin",
                                25: "huaji",
                                26: "mianqiang",
                                27: "kuanghan",
                                28: "guai",
                                29: "shuijiao",
                                30: "jinku",
                                31: "shengqi",
                                32: "jinya",
                                33: "pen",
                                34: "aixin",
                                35: "xinsui",
                                36: "meigui",
                                37: "liwu",
                                38: "caihong",
                                39: "xxyl",
                                40: "taiyang",
                                41: "qianbi",
                                42: "dnegpao",
                                43: "chabei",
                                44: "dangao",
                                45: "yinyue",
                                46: "haha2",
                                47: "shenli",
                                48: "damuzhi",
                                49: "ruo",
                                50: "OK"
                            },
                            title: {
                                1: "呵呵",
                                2: "哈哈",
                                3: "吐舌",
                                4: "啊",
                                5: "酷",
                                6: "怒",
                                7: "开心",
                                8: "汗",
                                9: "泪",
                                10: "黑线",
                                11: "鄙视",
                                12: "不高兴",
                                13: "真棒",
                                14: "钱",
                                15: "疑问",
                                16: "阴脸",
                                17: "吐",
                                18: "咦",
                                19: "委屈",
                                20: "花心",
                                21: "呼~",
                                22: "笑脸",
                                23: "冷",
                                24: "太开心",
                                25: "滑稽",
                                26: "勉强",
                                27: "狂汗",
                                28: "乖",
                                29: "睡觉",
                                30: "惊哭",
                                31: "生气",
                                32: "惊讶",
                                33: "喷",
                                34: "爱心",
                                35: "心碎",
                                36: "玫瑰",
                                37: "礼物",
                                38: "彩虹",
                                39: "星星月亮",
                                40: "太阳",
                                41: "钱币",
                                42: "灯泡",
                                43: "茶杯",
                                44: "蛋糕",
                                45: "音乐",
                                46: "haha",
                                47: "胜利",
                                48: "大拇指",
                                49: "弱",
                                50: "OK"
                            }
                        }, {
                            path: "/static/img/expression/qq/",
                            maxNum: 91,
                            excludeNums: [41, 45, 54],
                            file: ".gif",
                            placeholder: "#qq_{alias}#"
                        }]
                    });
                    $("#emoji_container_1").css("z-index","9999");
                })
            })
        </script>

        <!-- 中间聊天框架 end-->
    </div>

    <!-- 右边店铺信息 start-->
    <div class="chat-right">
        <div class="chat-warp">
            <div class="cr-header">
                <c:if test="${fn:length(suMainChats) > 0}">
                <div class="cr-shop-head">
                    <c:if test="${user.userId == suMainChats.get(0).fromUid}">
                        <img src="${fn:length(suMainChats.get(0).shop.shopHead)>0?'/static/img/seller/shop/'+=suMainChats.get(0).shop.shopHead:'/static/img/seller/seller_default_head.png'}"/>
                    </c:if>
                    <c:if test="${user.userId != suMainChats.get(0).fromUid}">
                        <img src="${suMainChats.get(0).user.head!='https://wwc.alicdn.com/avatar/getAvatar.do?userId=4040151018&width=60&height=60&type=sns'?suMainChats.get(0).user.head:"/static/img/seller/seller_default_head.png"}"/>
                    </c:if>
                </div>
                <div class="cr-shop-name">
                    <c:if test="${user.userId == suMainChats.get(0).fromUid}">
                        <p>${fn:length(suMainChats) >0 ?suMainChats.get(0).shop.shopName:'无'}</p>
                    </c:if>
                    <c:if test="${user.userId != suMainChats.get(0).fromUid}">
                        <p>${fn:length(suMainChats) >0 ?suMainChats.get(0).user.userName:'无'}</p>
                    </c:if>
                </div>
                <div class="cr-enter-shop">
                    <c:if test="${user.userId == suMainChats.get(0).fromUid}">
                        <a href="/shop/view_shop?brandId=${suMainChats.get(0).shop.id}" target="_blank">
                            <input type="button" value="进入店铺"/>
                        </a>
                    </c:if>
                </div>
                </c:if>
            </div>

            <div class="cr-content">
                <div class="cr-shop-preferential">
                    <div class="crs-title">
                        <p>猫巴士 + 大龙猫</p>
                        <a>更多 ></a>
                    </div>
                    <div class="crs-content">
                        <ul>
<%--                            <li>--%>
<%--                                <div class="coupon">--%>
<%--                                    <div class="coupon-info">--%>
<%--                                        <p>店铺红包 &nbsp;&nbsp;&nbsp;￥5</p>--%>
<%--                                        <span>活动时间：11/11-11/11满...</span>--%>
<%--                                    </div>--%>
<%--                                    <div class="receive-coupon">--%>
<%--                                        <a>--%>
<%--                                            领取--%>
<%--                                        </a>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                            </li>--%>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="cr-tail">
                <div class="cr-shop-recommend">
                    <div class="crs-title">
                        <p>本店推荐</p>
                <c:if test="${fn:length(shopRecommendProducts) > 0}">
                        <a href="/shop/search.htm?brandId=${suMainChats.get(0).shop.id}&orderType=hotsell_desc" target="_blank" id="moreRe">更多 ></a>
                </c:if>
                    </div>
                    <div class="crs-content">
                        <div class="recommend-box">
                            <ul id="shopRecommend">
                                <c:if test="${toIsSeller}">
                                    <c:if test="${fn:length(shopRecommendProducts) > 0}">
                                        <c:forEach items="${shopRecommendProducts}" var="product" varStatus="vs">
                                            <li>
                                                <div class="recommend-shop">
                                                    <div class="recommend-shop-img">
                                                        <a href="/buy.htm?pid=${product.id}" target="_blank">
                                                            <img src="${product.productImages.get(0).imagePath}"/>
                                                        </a>
                                                    </div>
                                                    <div class="recommend-tips">
                                                        <s>￥${product.nowPrice} </s>
                                                        <c:if test="${product.beforePrice < product.nowPrice and product.beforePrice != 0}">
                                                            <span> ￥${product.beforePrice}</span>
                                                        </c:if>
                                                    </div>
                                                </div>
                                            </li>
                                        </c:forEach>
                                    </c:if>
                                </c:if>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 右边店铺信息 end-->
</div>

<script>
    $(window.parent).bg_move({
        move:'.title',
        closed:'.close',
        size : 6
    });
</script>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/self/buy/buy_chat.js"></script>
</html>
